.categorys {
    width: 750px;
    height: 100%;
    background-color: #fff;
    padding-bottom: 108px;
    box-sizing: border-box;
    overflow-y: scroll;

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
    }

    .categoryGoods {
        background-color: #fff;

        .categoryContainer {
            display: flex;
            justify-content: space-between;

            .category {
                width: 140px;
                box-sizing: border-box;
                background-color: #F5F5F5;
                overflow-y: scroll;

                .categoryItem {
                    width: 140px;
                    padding: 30px 18px;
                    box-sizing: border-box;
                    position: relative;
                }

                .categoryTag {
                    font-size: 26px;
                    font-family: PingFangSC;
                    font-weight: 400;
                    color: rgba(62, 62, 62, 1);
                    line-height: 37px;
                    word-wrap: break-word;
                }

                .category-active {
                    background-color: #fff;

                    &::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 15px;
                        width: 7px;
                        height: 70px;
                        background: linear-gradient(180deg, rgba(255, 139, 58, 1) 0%, rgba(255, 83, 27, 1) 100%);
                    }
                }
            }

            .categoryGoodsList {
                width: 610px;
                overflow-y: scroll;
                .categoryGoodsItem {
                    padding-top: 20px;
                    padding-bottom: 20px;
                    display: flex;
                    justify-content: space-between;

                    .categoryGoodsItemImg {
                        width: 220px;
                        height: 220px;
                        position: relative;
                        background-color: #F5F5F5;

                        .categoryGoodsItemImgContainer {
                            width: 180px;
                            height: 180px;
                            top: 20px;
                            left: 20px;
                            background-size: contain;
                            position: absolute;
                        }

                        .categoryGoodsItemSoldout {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(255, 255, 255, 0.5);
                            padding: 50px;
                            padding-top: 60px;
                            box-sizing: border-box;

                            div {
                                width: 110px;
                                height: 110px;
                                background-color: rgba(0, 0, 0, 0.7);
                                border-radius: 100px;
                                line-height: 110px;
                                text-align: center;
                                color: #fff;
                                font-size: 35px;
                                margin: 0 auto;
                            }
                        }
                    }

                    .categoryGoodsItemInfo {
                        width: 450px;
                        padding: 10px 0;
                        box-sizing: border-box;
                        position: relative;

                        .categoryGoodsItemInfoName {
                            font-size: 32px;
                            font-family: PingFangSC-Semibold;
                            font-weight: 600;
                            color: rgba(34, 33, 45, 1);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            height: 75px;
                        }

                        .categoryGoodsItemInfoPrice {
                            font-size: 34px;
                            font-family: PingFangSC-Semibold;
                            font-weight: 600;
                            color: rgba(248, 101, 53, 1);
                            line-height: 48px;

                            span {
                                font-size: 24px;
                                font-family: PingFangSC-Regular;
                                font-weight: 400;
                                color: rgba(168, 167, 177, 1);
                                line-height: 33px;
                            }
                        }

                        .categoryGoodsItemInfoStock {
                            width: 240px;
                            height: 30px;
                            border-radius: 17px;
                            border: 1px solid rgba(248, 101, 53, 1);
                            margin-top: 12px;
                            box-sizing: border-box;
                            overflow: hidden;
                            position: relative;

                            .categoryGoodsItemInfoStockBg {
                                position: absolute;
                                left: 0;
                                top: 0;
                                background-color: rgba(248, 101, 53, 0.1);
                                width: 0;
                                height: 30px;
                            }

                            .categoryGoodsItemInfoStockValue {
                                font-size: 22px;
                                font-family: PingFangSC-Regular;
                                font-weight: 400;
                                color: rgba(248, 101, 53, 1);
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                            }
                        }

                        .categoryGoodsItemInfoSoldNum {
                            font-size: 22px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(168, 167, 177, 1);
                            margin-top: 10px;
                        }

                        .categoryGoodsItemBuy {
                            position: absolute;
                            bottom: 10px;
                            right: 0;
                            width: 120px;
                            height: 60px;
                            background: rgba(30, 31, 38, 1);
                            border-radius: 30px;
                            color: #fff;
                            box-sizing: border-box;
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                            outline: none;

                            &.orderState {
                                border: 2px solid rgba(30, 31, 38, 1);
                                color: rgba(30, 31, 38, 1);
                                background-color: #fff;
                            }
                        }
                    }
                }
            }

            .recommondBanner {
                width: 578px;
                height: 190px;
                padding-bottom: 16px;;
                margin: 0 auto ;
                >img{
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                }
            }
        }



    }

    .searchBar {
        padding: 20px 30px;
        transition: background-color .3s ease 0s;

        &.searchBarStateTwo {
            background-color: #fff;
        }

        .searchBarWrapper {
            width: 690px;
            height: 60px;
            background: #F5F5F5;
            border-radius: 30px;
            border: 1px solid rgba(151, 151, 151, 1);
            font-size: 24px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: #666;
            line-height: 60px;
            text-align: center;
            opacity: 0.9;
            box-sizing: border-box;

            img {
                margin-right: 10px;
                width: 24px;
                height: 24px;
            }

            &>* {
                vertical-align: sub;
            }
        }
    }
}